/**
 * c
 */

<template>
  <div class="testCPage">
    <FCPage direction="column">
      <FCLayout
        :flex="1"
        :border="border"
      >
        <FCPage>
          <FCLayout
            height="100px"
            backgroundColor="#fff"
          >form</FCLayout>
          <FCLayout :flex="1">table</FCLayout>
        </FCPage>
      </FCLayout>
      <FCLayout
        height="300px"
        :border="border"
      >
        <FCPage
          direction="row"
          backgroundColor="orange"
        >
          <FCLayout :flex="1">table</FCLayout>
          <FCLayout :flex="1">form</FCLayout>
        </FCPage>
      </FCLayout>
    </FCPage>
  </div>
</template>

<script>
import FCPage from '@/layouts/FCPage.vue'
import FCLayout from '@/layouts/FCLayout.vue'
import FCDataset from '@/vendors/fc-dataset/FCDataset'

export default {
  name: 'pageC',
  components: {
    FCPage,
    FCLayout,
  },
  data() {
    const dsInstate = new FCDataset({
      fields: [
        { name: 'a', type: 'number' },
        { name: 'b', type: 'string' },
        { name: 'd', type: 'string' },
        { name: 'date', type: 'date' },
      ],
      datas: [
        {
          a: 1,
          b: 'b2',
          c: 'c1-测试fields不存在的字段',
          d: 'd1',
          date: new Date(),
        },
        {
          a: 2,
          b: 'b2',
          c: 'c2-测试fields不存在的字段',
          d: 'd2',
          date: new Date(),
        },
        {
          a: 3,
          b: 'b3',
          c: 'c3-测试fields不存在的字段',
          d: 'd3',
          date: new Date(),
        },
      ],
    })
    return {
      border: '1px solid',
      dsInstate,
    }
  },
  mounted() {
    // console.log('> dsInstate:', this.dsInstate)
  },
}
</script>

<style>
.testCPage {
  height: 100%;
}
</style>